<template>
	<view>
		<view class="top">
			<image src="../../../../static/image/article.png" mode=""></image>
		</view>
		<view class="wrapper">
			<view class="big_wrapper">
				<view class="section">
					<view class="title">
						{{detailList.title}}
					</view>
					<view class="time">
						{{detailList.time}}
					</view>
				</view>
				<view class="content" v-html="detailList.content">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList:{}
			}
		},
		async onLoad(option) {
			let {id}=option
			this.detailList=await this.getDetailData(id)
			this.detailList.content=this.detailList.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
		},
		methods: {
			async getDetailData(id){
				const {data}=await this.$http({
					url:"mis/totucontent?id="+id
				})
				return data.data
			}
		}
	}
</script>

<style scoped>
.top image{
	width: 100%;
	height: 300rpx;
}
.wrapper{
	padding: 0 30rpx;
	position: relative;
}
.big_wrapper{
	width: 690rpx;
	position: relative;
}
.section{
	background-color:#EFECEC;
	border-radius: 10rpx;
	padding: 20rpx 50rpx;
	height: 169rpx;
	width: 690rpx;
	position: relative;
}
.section .title{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.section .time{
	position: absolute;
	right: 10%;
	bottom:10%;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #999999;
}
.big_wrapper{
	position: absolute;
	top: -69rpx;
}
.content{
	margin-top: 20rpx;
}
</style>
